<template>
	<view style="height: 100%;">
		<view class="centent">
			<view class="navtopbox" :style="'height:'+ (showjiazhang.review_status==1?heightmax:heightmin)">
				<view class="navtopboxcenter">
					<scroll-view scroll-y="true" style="height:100% ;">
						<view class="title">
							<text>【{{showjiazhang.message_title ? showjiazhang.message_title:'正在加载...'}}】</text>
						</view>

						<view class="navcentent">
							<rich-text :nodes="content?content:'正在加载...'"></rich-text>
						</view>
						<view class="time">
							<view class="left">
								<text>发布日期：{{showjiazhang.createtime?showjiazhang.createtime:'正在加载...'}}</text>
							</view>
							<view class="right">
								<view class="liulan">
									<image src="../../static/yanj.png" mode=""></image>
									<view class="operate-text" style='padding-left:6rpx;color:#adacac'>
										{{liulan?liulan:'浏览量'}}
									</view>
								</view>
								<view class="dianzan" @tap="jiazhangshowdan()" v-if="showjiazhang.tags_status==1">
									<image :src="isLike==1?thumbUpImg:thumbImg" mode=""></image>
									<view class="operate-text"
										:style="'padding-left:6rpx;color:'+ (isLike==1?operateUpColor:operateColor)">
										{{likeNumber?likeNumber:'点赞'}}
									</view>
								</view>
							</view>

						</view>
						<view class="touxiang">
							<view class="imgboxtx" v-for="(item,index) in tags_list" :key="index">
								<image :src="item.avatar" mode=""></image>
							</view>


						</view>
						<view class="pinglun" v-if="showjiazhang.review_status==1">						
							<zwz-comment :comments="comments"  @replycomment="replycomment"></zwz-comment>
						</view>

					</scroll-view>
				</view>
			</view>
			<view class="comment-btm" style="position: fixed; bottom: 0; left: 0;z-index: 9999;" v-if="showjiazhang.review_status==1">
				<input type="text" :placeholder="placeholderComment" :focus="iptFocus" @focus="showgunagbiao"
					v-model="pinglun" @blur="showfocus" />
				<button @tap="comment">发送</button>
			</view>
		</view>
		<view class="mask" style="opacity: 0.2" @tap="hide" v-if="showMask" @touchmove.stop.prevent="moveHandle"></view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from 'vuex';
	export default {
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
				isLogin: state => state.user.isLogin
			})
		},
		data() {
			return {
				showMask:false,
				iptFocus: false,
				placeholderComment: '发条评论吧~',
				showjiazhang: {},
				pinglun: '',
				content: '',
				id: 0,
				class_id: {
					type: Number
				},
				isLike: {
					type: Number
				},
				likeNumber: {
					type: Number
				},
				liulan: {
					type: Number
				},
				heightmax: "calc(100% - 140rpx)",
				heightmin: "100%",
				pid: 0,
				searchFocus: false,
				tags_list: [],
				thumbImg: '../../static/xin.png',
				thumbUpImg: '../../static/xin2.png',
				operateColor: 'gray',
				operateUpColor: '#fea74a',
				comments: []

			}
		},
		methods: {
			hide() {	
				
				this.pinglun = ''
				this.pid = 0
				this.placeholderComment = '发条评论吧~'
				this.showMask = false;
			},
			replycomment(userNickName,id){
				console.log(userNickName)
				this.showMask = true;
				this.iptFocus = true;
				this.placeholderComment = '回复@' + userNickName;
				this.pid = id;
			},
			showfocus() {
				this.iptFocus = false;
				this.showMask = false;
			},
			showgunagbiao() {
				this.showMask = true;
			},		
			jiazhangxiangqing() {
				this.$store
					.dispatch('jiazhangxiangqing', {
						token: this.userInfo.token,
						id: this.id,
						class_id: this.class_id,
						openid: this.userInfo.openid,
						index:uni.getStorageSync("def")
					})
					.then(res => {

						if (res.data.code == 1) {
							this.isLike = res.data.data.if_tags
							this.likeNumber = res.data.data.tags
							this.liulan = res.data.data.views
							this.tags_list = res.data.data.tags_list
							this.comments = res.data.data.review_list
							this.showjiazhang = res.data.data.info
							this.content = res.data.data.info.message_content
							this.getshowrichtext()
						}

					});
			},
			getshowrichtext() {
				let richtext = this.content;
				let regex = new RegExp('<img', 'gi');
				richtext = richtext.replace(regex, `<img style="max-width:100%;height:auto"`);
				this.content = richtext;
			},
			jiazhangshowdan() {
				this.$store
					.dispatch('jiazhangshowdan', {
						openid: this.userInfo.openid,
						id: this.id,
						class_id: this.class_id,
						index: this.isLike == 0 ? 1 : 0,
						status:uni.getStorageSync("def")
					})
					.then(res => {
						if (res.data.code == 0) {
							uni.showToast({
								title: res.data.msg,
								icon: "none"
							})
						} else {
							this.isLike = res.data.data.if_tags
							this.likeNumber = res.data.data.tags_num
							this.jiazhangxiangqing()
							uni.showToast({
								title: res.data.msg,
								icon: "none"
							})
						}

					});
			},
			comment() {
				
				if (!this.pinglun) {
					uni.showToast({
						title: '请输入评论内容...',
						icon: "none",

					})

				} else {
					this.$store
						.dispatch('fajzsongpinglun', {
							openid: this.userInfo.openid,
							id: this.id,
							student_id: uni.getStorageSync("student_id") ? uni.getStorageSync("student_id") : 0,
							index: uni.getStorageSync("def"),
							content: this.pinglun,
							class_id: this.class_id,
							pid: this.pid
						})
						.then(res => {
							this.showMask = false;
							this.pinglun = ''
							this.placeholderComment = '发条评论吧~'
							this.pid = 0
							if (res.data.code == 0) {
								uni.showToast({
									title: res.data.msg,
									icon: "none"
								})
							} else {
								
								this.jiazhangxiangqing()
								uni.showToast({
									title: res.data.msg,
									icon: "none",
								})
							}

						});


				}

			}

		},
		onLoad(data) {
			this.id = data.id
			this.class_id = data.class_id

		},
		onShow() {
			if (!this.isLogin) {
				if (uni.getStorageSync("token")) { //判断是否有token，然后调用自动登录的接口
					this.$store
						.dispatch('loginByWexin')
						.then(res => {
							this.code = res
							this.$store
								.dispatch('apiUserAutoLogin', {
									token: uni.getStorageSync("token")
								})
								.then(res => {
									this.jiazhangxiangqing()
								});
						});
				} else { //没有token，去登录页面点击登录				
					uni.navigateTo({
						url: '../login/login'
					})
				}

			} else {
				this.jiazhangxiangqing()
			}
		},
		onPullDownRefresh() {
			this.jiazhangxiangqing()
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1500)
		}
	}
</script>

<style lang="less">
	page {
		height: 100%;
		background-color: #f4f4f4;
		box-sizing: border-box;

	}

	.centent {
		background-image: url(../../static/keding.png);
		background-size: 100% auto;
		background-repeat: no-repeat;
		width: 100%;
		height: 100%;

		.navtopbox {
			width: 100%;
			height: calc(100% - 140rpx);
			padding: 20rpx;
			box-sizing: border-box;

			.navtopboxcenter {
				width: 100%;
				height: 100%;
				background-color: #fff;
				box-shadow: 0rpx 4rpx 17rpx 4rpx rgba(201, 202, 208, 0.35);
				border-radius: 15rpx;
				overflow: hidden;
				padding: 30rpx 20rpx;
				box-sizing: border-box;

				.title {
					font-size: 35rpx;
					font-weight: bold;
					color: #000000;
					margin-bottom: 10rpx;

				}

				.time {
					display: flex;
					justify-content: space-between;
					align-items: center;
					font-size: 24rpx;
					color: #ccc;
					margin: 30rpx 0;

					.right {
						display: flex;
						align-items: center;

						.liulan {
							display: flex;
							align-items: center;

							image {
								width: 32rpx;
								height: 26rpx;
							}
						}

						.dianzan {
							display: flex;
							align-items: center;
							margin-left: 10rpx;

							image {
								width: 32rpx;
								height: 26rpx;
							}
						}


					}
				}

				.navcentent {
					font-size: 26rpx;

				}

			}
		}


	}

	.touxiang {
		display: flex;
		flex-wrap: wrap;

		.imgboxtx {
			width: 65rpx;
			height: 65rpx;
			margin: 5rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}
	}
	.comment-btm {
		position: fixed;
		bottom: 0;
		left: 0;
		height: 140rpx;
		width: 100%;
		display: flex;
		align-items: center;
		background-color: #fff;
		input {
			height: 70rpx;
			width: 400rpx;
			border-radius: 20rpx;
			background-color: #f3f3f3;
			margin-left: 80rpx;
			padding: 10rpx;
			font-size: 28rpx;
		}
	
		button {
			height: 70rpx;
			font-size: 30rpx;
			margin-top: 10rpx;
			line-height: 70rpx;
			text-align: center;
		}
	}
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background-color: rgb(0, 0, 0);
		z-index: 999;
	}
	::-webkit-scrollbar {width: 0px; height: 0px;color: transparent;}
</style>
